<template>
  <div class="login">
    <div class="back">
        <zgticon name="esay-close" @click.native="goback"></zgticon>
    </div>
    <h3 class="title">短信登录</h3>
      <van-form ref="form">
          <van-field
            v-model="form.mobile"
            name="mobile"
            type="number"
            placeholder="请填写您的手机号码"
            :rules="[{ required: true, message: '请填写正确的手机号码',pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ }]"
          />
          <van-field
            v-model="form.code"
            type="number"
            name="code"
            placeholder="请填写验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
          <template #button>
              <van-button @click="sendMessage" native-type="button" :disabled='!flag' :class="flag?'':'dis-bg'">
                <span v-if="flag">发送验证码</span>
                <span v-else>
                  {{count}}s
                </span>
                </van-button>
          </template>
          </van-field>
      </van-form>
      <van-button type="primary" size="large" class="btn-login" @click="login">登录</van-button>
  </div>
</template>

<script>
import { getSIMcode, userLogin } from '@/api/user.js'
export default {
  name: 'Login',
  data () {
    return {
      form: {
        mobile: '',
        code: ''
      },
      count: 60,
      timer: null,
      flag: true
    }
  },
  methods: {
    // 销毁定时器
    beforeDestroy () {
      clearInterval(this.timer)
    },
    // 返回功能
    goback () {
      this.$router.go(-1)
    },
    // 登录功能
    login () {
      // 1.发送手机号和验证码到后台 不带参数是验证所有信息
      this.$refs.form.validate().then((data) => {
        // console.log('1')
        // 1.成功请求后进行axios的post请求
        userLogin(this.form).then((data) => {
          console.log(data)
          // 2.将返回的token存储到本地
          // this.$storage.setStorage('token', data.token)
          this.$store.commit('user/setToken', data.token)
          // 3.跳转回我的
          this.$router.go(-1)
        }, (err) => {
          console.log(err)
        })
      })
    },
    // 发送验证码功能
    sendMessage () {
      // 实现发送验证码功能
      // 1.vant -form 自带验证功能
      this.$refs.form.validate('mobile').then(() => {
        // 返回的data未定义可能是正确的
        // console.log('成功')
        // 2.通过axios请求接口 请求较多封装axios 在utils下的request.js中 并在api的user.js中定义所有有关的函数
        getSIMcode(this.form.mobile).then((data) => {
          // console.log(data)
          if (data && data.data.status === 200) {
            this.$toast.success('发送成功')
          }
          // 3.当请求成功时，将计时器设置倒计时60s
          this.flag = false
          this.timer = setInterval(() => {
            // 1.flag设置为false 2.重新计时 3.清除定时器 4.变量制空
            this.count--
            if (this.count === 0) {
              this.flag = true
              this.count = 60
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }, () => {
          this.$toast.fail('发送失败')
        })
      }, (err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .login{
    padding: 0 64px;
    .back{
      height: 120px;
      display: flex;
      align-items: center;
    }
    .title{
      padding: 60px 0;
      font-weight: normal;
    }
    .btn-login{
      background: linear-gradient(to right, #FF9999, #FFA179);
      border: none;
      margin-top: 100px;
    }
    .dis-bg{
      background: rgba(41, 3, 3, 0.5);
    }
  }
</style>
